import React from 'react';
import styled from 'styled-components';
import { motion } from 'framer-motion';
import { colors, spacing } from '../styles/variables';

const ToggleContainer = styled.div`
  display: flex;
  align-items: center;
  gap: ${spacing.sm};
`;

const ToggleLabel = styled.span`
  color: ${colors.textPrimary};
  font-size: 0.875rem;
`;

const ToggleSwitch = styled.button`
  position: relative;
  width: 60px;
  height: 30px;
  background: ${props => props.isDark ? colors.primary : colors.border};
  border-radius: 15px;
  border: none;
  cursor: pointer;
  outline: none;
  transition: background 0.3s;

  &::after {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    width: 24px;
    height: 24px;
    background: ${colors.background};
    border-radius: 50%;
    transition: transform 0.3s;
    transform: translateX(${props => props.isDark ? '30px' : '0'});
  }
`;

const SunIcon = styled.span`
  color: ${colors.textSecondary};
  font-size: 1rem;
`;

const MoonIcon = styled.span`
  color: ${colors.textSecondary};
  font-size: 1rem;
`;

function ThemeToggle({ isDark, toggleTheme }) {
  // 过滤掉传递给DOM元素的自定义属性
  const toggleSwitchProps = {
    onClick: toggleTheme,
    'aria-label': isDark ? '切换到浅色模式' : '切换到深色模式'
  };

  return (
    <ToggleContainer>
      <SunIcon>☀️</SunIcon>
      <ToggleSwitch 
        {...toggleSwitchProps}
      />
      <MoonIcon>🌙</MoonIcon>
    </ToggleContainer>
  );
}

export default ThemeToggle;